<template>
  <div :class="{'mobile-create-ip': showMobilePage}" class="ip-info-outer">
    <div class="ip-info-wrap">
      <div class="left">
        <div class="ip-image-box">
          <img :src="info.cover || defaultMengli">
        </div>
      </div>
      <el-row>
        <el-form label-width="8em" label-position="right" class="info-form">
          <el-col :span="8">
            <el-form-item label="IP名称：">
              <div style="display: flex;">
                <el-tooltip v-if="info.name" placement="top">
                  <div slot="content" style="max-width:200px;">{{ info.name }}</div>
                  <span class="ellipsisOne">{{ info.name }}</span>
                </el-tooltip>
                <div v-else>--</div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="表情包套数：">{{ info.productionTotal | moneyFilter }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总下载量：">{{ info.downloadNum | moneyFilter }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="表情数量：">{{ info.workNum | moneyFilter }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="表情包范围：">{{ info.range | mengliEmojiRange }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总赞赏金额(元)：">{{ info.rewardPrice | moneyFilter }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总发送量：">{{ info.sendNum | moneyFilter }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总赞赏次数：">{{ info.rewardNum | moneyFilter }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="IP系列：">{{ info.ipSeriesName || "--" }}</el-form-item>
          </el-col>
        </el-form>
        <el-col :span="24">
          <div class="relevant-edit-box">
            <el-form ref="ipRuleForm" :model="ipInfo" label-width="100px" label-position="left">
              <el-form-item label="已关联表情包" prop="relevantIds">
                <relate-emoji :ids="ids" :options="ipInfo.relevantIds" @postMessage="postMessage" />
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { moneyFilter } from '@/filters/number';
import { mengliEmojiRange } from '@/filters/status';
import defaultMengli from '@/assets/mengli/defaultMengli.png';
import RelateEmoji from '@/components/RelateEmoji';
import { mapState } from 'vuex';

export default {
  name: 'IpInfo',
  filters: { moneyFilter, mengliEmojiRange },
  components: {
    RelateEmoji
  },
  props: {
    info: {
      type: Object,
      default: () => null
    },
    ipInfo: {
      type: Object,
      default: () => {
        return {
          ipName: '',
          range: '',
          cover: '',
          relevantIds: []
        };
      }
    }
  },
  data() {
    return {
      defaultMengli
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    relevantNames() {
      const relevants = this.info.relevantIds;
      let names = '--';
      if (relevants && relevants.length > 0) {
        names = relevants.map(item => {
          return item.name;
        }).join(',');
      }
      return names;
    },
    ids() {
      const ids = this.ipInfo.relevantIds.map(res => {
        return res.id;
      });
      return ids;
    }
  },
  methods: {
    postMessage(data) {
      const ipInfo = { ...this.ipInfo };
      ipInfo.relevantIds = data.relatedEmojiOptions;
      this.$emit('update:ipInfo', ipInfo);
    }
  }
};
</script>
<style lang="scss" scoped>
.info-form {
  &::v-deep {
    .el-form-item__label {
      color: #999;
      line-height: 1em !important;
      padding-right: 0;
    }
    .el-form-item__content {
      color: #333;
      line-height: 1em !important;
    }
    .el-form-item {
      margin-bottom: 16px !important;
    }
  }
}
.relevant-edit-box {
  &::before {
    content: '';
    display: block;
    // height: 120px;
    width: 120px;
    margin-right: 32px;
  }
}
.ip-info-wrap {
  display: flex;
  .left {
    height: 120px;
    width: 120px;
    margin-right: 32px;
    .ip-image-box {
      height: 120px;
      width: 120px;
      overflow: hidden;
      border-radius: 8px;
      img {
        height: 100%;
        width: 100%;
      }
    }
  }
}
.relevant-wrap {
  display: flex;
  .label {
    // width: 170px;
  }
  .content {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.mobile-create-ip {
  padding: 0 12px;
}
</style>
